<template>
  <div>
    <h2>销售总量</h2>
    <div class="chart" id="oneChart">图表的容器</div>
  </div>
</template>

<script setup>
import {inject,onMounted,reactive} from 'vue'
let $echarts = inject('echarts')
let $http=inject('axios')

let data = reactive({})
let xdata = reactive([])
let ydata = reactive([])

async function getState(){
  data = await $http({'url':'one/data'});
}

function setData(){
  xdata = data.data.chartData.chartData.map(v=>v.title);
  ydata = data.data.chartData.chartData.map(v=>v.num);
}

onMounted(() => {
  let myChart = $echarts.init(document.getElementById("oneChart"));

  getState().then(()=>{ 
    setData();

    myChart.setOption({
      // 配置图标的位置 不包含坐标轴中的文字
      grid:{
        top:"3%",
        left:"1%",
        right:"6%",
        bottom:"3%",
        containLabel:true// 包含坐标轴中的文字
      },
      xAxis:{
        type: "value",
        // 设置坐标轴上文字颜色
        axisLine:{
          lineStyle:{
            color:"#fff"
          }
        }
      },
      yAxis:{
        type: "category",
        data: xdata,
        // 设置坐标轴上文字颜色
        axisLine:{
          lineStyle:{
            color:"#fff"
          }
        }
      },
      series:[
        {
          data: ydata,
          type: "bar",
          // 设置柱状图区域样式
          itemStyle: {
            normal: {
              // 如果传递数组，则需要传递四个元素，依次表示 左上，右上，右下、左下
              barBorderRadius:[0,20,20,0],
              // color:"red"如果写死值那么是一个固定的颜色
              // 我们需要设置渐变色使用
              // newecharts.graphic.LinearGradient(a,b,c,d,arr)来进行设置
              // a ,b,c,d为0，1
              // a:1 arr中的颜色右到左
              // c:1 arr中的颜色左到右
              // b:1 arr中的颜色下到上
              // d:1 arr中的颜色上到下
              color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#005eaa",
                },
                {
                  offset: 0.5,
                  color: "#339ca8",
                },
                {
                  offset: 1,
                  color: "#cda819",
                },
              ]),
            },
          },
        }
      ]
    })
  })
})

</script>

<style scoped>
.chart {
  height: 4.5rem;
}
h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>